<template>
	<view class="container" :style="{minHeight:$height()}">
		<view class="mine">
			<view class="mine-info king-flex__center">
				<image src="@/static/Icon/tou2.gif" mode="widthFix"></image>
				<view class="mine-box king-flex__column">
					<view class=" king-flex__center">
						<view class="nickname" v-if="userinfo.realname">
							{{userinfo.realname||""}}
						</view>
						<text class="area"
							v-if="userinfo.district">{{userinfo.district.mergerName.split(',')[0]}}</text>
					</view>
					<text class="mobile">{{mobile}}</text>
				</view>
			</view>
			<image class="blot" src="@/static/img/bolt.png" mode="widthFix"></image>
		</view>

		<view class="account">
			<text class="title">
				我的账户
			</text>
			<view class="items king-flex king-flex__between">
				<view class="item king-flex king-flex__column" @click="$next(`/pages/commissionCenters/index`)">
					<text class="tip">账户余额({{getMoney(1,userinfo.money||'0.00')}})</text>
					<text class="num">{{getMoney(2,userinfo.money||'0.00')}}</text>
				</view>
				<view class="item1 king-flex king-flex__column" @click="$next(`/pages/functionCore/customer/list`)">
					<text class="tip">拜访客户(家)</text>
					<text class="num">{{commissionCount.totalFlowCustom||0}}</text>
				</view>
			</view>
			<u-button type="primary" color="#1A74E4" @click="$next(`/pages/mine/confirmAccounts`)">确认结算单明细</u-button>
		</view>

		<view class="list">
			<view class="item king-align__center king-flex__between" @click="generatorOffice">
				<view class="king-align__center">
					<image class="icon" src="@/static/img/office.png" mode="widthFix"></image>
					<view class="list-title">我的聘书</view>
				</view>
				<i class="iconfont">&#xe63b;</i>
			</view>
			<view class="item king-align__center king-flex__between" @click="$next(`/pages/mine/myContractList`,true)">
				<view class="king-align__center">
					<image class="icon" src="@/static/img/mine_contract.png" mode="widthFix"></image>
					<view class="list-title">我的合同</view>
				</view>
				<i class="iconfont">&#xe63b;</i>
			</view>
			<view class="item king-align__center king-flex__between" @click="$next(`/pages/mine/agreement`,true)">
				<view class="king-align__center">
					<image class="icon" src="@/static/img/par.png" mode="widthFix"></image>
					<view class="list-title">合作协议</view>
				</view>
				<i class="iconfont">&#xe63b;</i>
			</view>
			<view class="item king-align__center king-flex__between"
				@click="$next(`/pages/functionCore/customer/list`,true)">
				<view class="king-align__center">
					<image class="icon" src="@/static/img/mine_custom.png" mode="widthFix"></image>
					<view class="list-title">我的客户</view>
				</view>
				<i class="iconfont">&#xe63b;</i>
			</view>
			<view class="item king-align__center king-flex__between" @click="$next('/pages/mine/personInfo')">
				<view class="king-align__center">
					<image class="icon" src="@/static/img/mine_info.png" mode="widthFix"></image>
					<view class="list-title">个人信息</view>
				</view>
				<i class="iconfont">&#xe63b;</i>
			</view>
			<view class="item king-align__center king-flex__between"
				@click="$next(`/pages/mine/TownMayor?provinceId=${userinfo.provinceId}`)">
				<view class="king-align__center">
					<image class="icon" src="@/static/img/mine_towner.png" mode="widthFix"></image>
					<view class="list-title">电长申请</view>
				</view>
				<i class="iconfont">&#xe63b;</i>
			</view>
			<view class="item king-align__center king-flex__between" @click="$next(`/pages/mine/zhenZhangList`)"
				v-if="permissions[0] == '电长管理'">
				<view class="king-align__center">
					<image class="icon" src="@/static/img/mine_towner.png" mode="widthFix"></image>
					<view class="list-title">电长管理</view>
				</view>
				<i class="iconfont">&#xe63b;</i>
			</view>
			<view class="item king-align__center king-flex__between" v-for="(item,index) in companyResourceTypeList" :key="index" @click="$next(`/pages/mine/floder?type=${item.dict_value}`)">
				<view class="king-align__center">
					<image class="icon" src="@/static/img/resource.png" mode="widthFix"></image>
					<view class="list-title">{{item.dict_label}}</view>
				</view>
				<i class="iconfont">&#xe63b;</i>
			</view>

		</view>
		<u-popup v-model="show" mode="center">
			<image style="border-bottom: 1px solid #eaeaea;" :src="getImagePath()" mode="widthFix"></image>
			<view style="margin:5px auto;display: flex;justify-content: space-around;">
				<u-button size="medium" type="primary" @click="saveFile()">保存图片</u-button>
			</view>
		</u-popup>
		<status-modal :showSign="showSign" :showSignTownerContract="showSignTownerContract"
			:showSignContract="showSignContract" :showStatus="showStatus" :tenantCode="tenantCode" :userType="userType"
			:updateDate="userinfo.updateDate"></status-modal>
	</view>
</template>

<script>
	import statusModal from '@/components/statusModal/statusModal.vue'
	export default {
		data() {
			return {
				showSign: false,
				showSignContract: false,
				showSignTownerContract: false,
				showStatus: false,
				userType: 0,
				commissionCount: {},
				userinfo: {},
				mobile: "",
				userinfo: uni.getStorageSync("userinfo"),
				tenantCode: uni.getStorageSync("tenantCode"),
				permissions: [],
				show: false,
				companyResourceTypeList:[],
			}
		},
		components: {
			statusModal
		},
		onLoad() {
			this.$axios.request(this.$api.listDictDataByType,"GET",{
				dictType:"floder_type"
			}).then((val) => {
				this.companyResourceTypeList = val.data
			})
		},

		onShow() {
			this.getUser()
			this.getCommissionCount()
			this.getTownMayor()
		},
		methods: {
			getImagePath() {
				return `${this.$axios.interfaceUrl()}${this.$api.generatorOffice}?user_id=${this.userinfo.id}`
			},
			saveFile() {
				uni.getImageInfo({
					src: this.getImagePath(), //更换这个url就可以
					success: function(image) {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function(res) {
								uni.showModal({
									title: "保存成功",
									content: "图片已经在您的相册里啦",
									showCancel: false,
								});
			
							},
							fail(error) {
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none",
								});
							},
						});
					},
					fail(error) {
					},
				});
			},
			getMoney(type, money) {
				if (type == 1) {
					if (parseFloat(money) < parseFloat("10000")) {
						return "元"
					} else {
						return "万元"
					}
				}

				if (type == 2) {
					if (parseFloat(money) < parseFloat("10000")) {
						return money
					} else {
						return (parseFloat(money) / parseFloat("10000")).toFixed(2)
					}
				}
			},
			getCommissionCount() {
				this.$axios.request(this.$api.getCommissionCount, "GET").then((val) => {
					this.commissionCount = val.data
				})
			},
			navPerson() {
				uni.navigateTo({
					url: '/pages/mine/personInfo'
				})
			},

			// 跳转到申请电长页面
			TownMayor() {
				uni.navigateTo({
					url: `/pages/mine/TownMayor?provinceId=${this.userinfo.provinceId}`
				})
			},
			TownMayorMange() {
				uni.navigateTo({
					url: `/pages/mine/zhenZhangList`
				})
			},
			heHuoRen() {
				uni.navigateTo({
					url: `/pages/mine/heZuoHuoBanStting`
				})
			},
			// 获取电长权限
			getTownMayor() {
				this.$axios.request(this.$api.getTownMayorApi, "GET").then((val) => {
					this.permissions = val.data.permissions
				})
			},
			generatorOffice() {
				this.show = true
			},
			getUser() {
				this.$axios.request(this.$api.getUser, "GET").then((val) => {
					this.userinfo = val.data
					this.userType = val.data.userType
					if (val.data.realname == '') {
						this.showSign = true
						this.showStatus = false
						this.showSignContract = false
					} else if (val.data.status == 0) {
						this.showStatus = true
						this.showSign = false
						this.showSignContract = false
					} else if (val.data.status == 1 && val.data.sign == 0) {
						this.showSignContract = true
						this.showSign = false
						this.showStatus = false
					} else {
						this.showSign = false
						this.showStatus = false
						this.showSignContract = false
					}
					this.mobile = val.data.mobile.substr(0, 3) + "****" + val.data.mobile.substr(7)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #ECEEEE;
	}

	.mine {
		height: 380rpx;
		background: #1A74E4;
		padding: 50rpx;

		.blot {
			width: 574rpx;
			height: 142.294px;
			position: absolute;
			right: 0;
			top: 0;
		}

		.mine-info {
			z-index: 1;
			position: absolute;

			image {
				width: 106rpx;
				border: 3px solid #FFFFFF;
				border-radius: 50%;
			}

		}

		.mine-box {
			margin-left: 37rpx;
		}

		.nickname {
			font-size: 34rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 48rpx;
		}

		.mobile {
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 33rpx;
		}

		.area {
			font-size: 22rpx;
			font-weight: 600;
			margin-left: 20rpx;
			color: #1A74E4;
			line-height: 30rpx;
			background-color: #FFFFFF;
			padding: 5rpx 12rpx;
			border-radius: 8rpx;
		}
	}


	.account {
		background: #FFFFFF;
		padding: 47rpx;
		position: relative;
		border-radius: 40rpx 40rpx 0px 0px;
		margin-top: -180rpx;

		.items {
			margin: 20rpx 0rpx;

			.item {
				width: 320rpx;
				height: 156rpx;
				background-image: url(@/static/img/task1.png);
				background-repeat: no-repeat;
				background-size: 100%;
			}

			.item1 {
				width: 320rpx;
				height: 156rpx;
				background-image: url(@/static/img/task2.png);
				background-repeat: no-repeat;
				background-size: 100%;

			}

			image {
				width: 208rpx;
				height: 144rpx;
				position: absolute;
			}


			.tip {
				color: #022551;
				font-size: 24rpx;
				font-weight: 600;
				margin-top: 25rpx;
				margin-left: 10rpx;
				position: relative;
			}

			.num {
				color: #022551;
				font-size: 40rpx;
				font-weight: bold;
				margin-left: 10rpx;
				margin-top: 10rpx;
				position: relative;
			}
		}
	}


	.list {
		background: #FFFFFF;
		padding: 0rpx 47rpx;
		margin-top: 20rpx;

		.item {
			border-bottom: 1px solid #eaeaea;
			padding: 47rpx 0rpx;
		}

		.item:last-child {
			border-bottom: none;
		}

		.icon {
			width: 38rpx;
		}

		.list-title {
			font-size: 26rpx;
			font-weight: 600;
			color: #333333;
			line-height: 37rpx;
			margin-left: 29rpx;
		}

		i {
			color: #d6d6d6;
		}
	}
</style>